﻿@page "/gantt-chart/row-drag-and-drop"

@using Syncfusion.Blazor.Gantt
@using ej2_blazor_defaultdata

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates Gantt Chart component with the row drag and drop feature. Using this feature, rows can be dropped at above and below as a sibling or child to the existing rows.</p>
</SampleDescription>

<ActionDescription>
    <p>In this example, you can see how to drag and drop a row in Gantt Chart with the provided data source.</p>
    <p>Gantt Chart rows can be dragged and dropped by enabling <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowRowDragAndDrop'>AllowRowDragAndDrop</a></code> property as true.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt DataSource="@TaskCollection" Height="450px" Width="100%" HighlightWeekends="true" ProjectStartDate="@ProjectStart"
                     ProjectEndDate="@ProjectEnd" TreeColumnIndex="1" AllowRowDragAndDrop="true">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress"
                     Dependency="Predecessor" ParentID="ParentId"></GanttTaskFields>          
                <GanttLabelSettings LeftLabel="TaskName" TValue="DefaultData.TaskData"></GanttLabelSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code{
    public DateTime ProjectStart = new DateTime(2019, 3, 24);
    public DateTime ProjectEnd = new DateTime(2019, 7, 6);
    public List<DefaultData.TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        this.TaskCollection = DefaultData.ProjectNewData();
    }
}
